<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>日志类型</title>

</head>
<body>

<div id="log_type_overview_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse"
           data-transition="slide">主页</a>

        <h1>日志类型</h1>
        <a href="form" data-icon="plus">添加</a>
    </div>
    <div data-role="content">
        <ul data-role="listview" id="log_type_view" data-inset="true" data-dividertheme="d" data-filter="true"
            data-filter-placeholder="搜索日志类型..." data-count-theme="b" data-split-icon="delete">
            <c:forEach items="${overviewDto.list}" var="type">
                <li ${type.selectedType?'data-theme="b"':''}>
                    <a href="details/${type.guid}" data-transition="fade">
                        <h3>${type.name}</h3>

                        <p>${type.description}</p>

                        <p class="ui-li-aside">${type.createDate}</p>
                    </a>
                    <a href="delete_confirm/${type.guid}" data-transition="slidedown">删除</a>
                </li>
            </c:forEach>
            <c:if test="${empty overviewDto.list}">
                <li>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">还没创建任何的日志类型哦.
                            <a href="form" data-role="button" data-icon="plus" data-inline="true"
                               data-mini="true">点击添加</a>
                        </div>
                        <div class="ui-block-b">&nbsp; </div>
                    </div>
                </li>
            </c:if>
        </ul>
        <c:if test="${overviewDto.showMore}">
            <div data-role="controlgroup" id="log_type_more_div">
                <a href="javascript:void(0);" id="log_type_more_link" data-role="button" class="color-b">
                    更多 (<span
                        id="page_number">${overviewDto.pageNumber}</span>/${overviewDto.totalPages})<img
                        id="more_loading" src="${contextPath}/images/public/load.gif" alt="loading" class="more-img"/>
                </a>
            </div>
        </c:if>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="c">
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="../overview" data-icon="arrow-l" data-direction="reverse" data-transition="flip">返回</a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var pageNumber = ${overviewDto.pageNumber};
        var totalSize = ${overviewDto.totalSize};

        $("a#log_type_more_link").bind("click", function () {
            var $this = $(this).addClass("gray");
            var nextPageNumber = (++pageNumber);
            var loading = $("#more_loading").show();
            getData();
            function getData() {
                $.ajax({
                    url:"overview/more",
                    data:{
                        pageNumber:nextPageNumber,
                        totalSize:totalSize
                    },
                    success:function (data) {
                        var listview = $("#log_type_view").append($.trim(data)).listview("refresh");
                        $this.removeClass("gray");
                        checkShowMore(listview);
                    }
                });
            }

            function checkShowMore(listview) {
                var addedSize = listview.find("li").size();
                if (addedSize == totalSize) {
                    $("#log_type_more_div").hide();
                } else {
                    loading.hide();
                }
                $this.find("#page_number").html(nextPageNumber);
            }
        });
    </script>
</div>
</body>
</html>